<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/scrollLoadFunction.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 13px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="scrollLoadDemo">
	<!-- Demo区 -->
	<div title='滚动加载' tabid='tab2'><br>
		<h4 id="hd1"><span onclick="Ccay.Common.toggle(this,'#demo1')" style="cursor:pointer;">实例1：IGrid静态数据滚动加载</span></h4>
		<div id="demo1" style="display: none;">
			<span class="showClew">备注：IGrid静态数据滚动加载Demo根据移动竖向滚动条进行简单的数据加载、展示、排序、改变列宽</span><br /><br />
			<div id="iStudent4"></div>
			<h3>html Code</h3>
		 	<span></span>
		 	<div class="codeArea">
				<pre id='html4'>&lt;div id="igridDemo4">&lt;/div></pre>
		 	</div>
		 	<h3>js Code</h3>
	    	<span></span>
	    	<div class="codeArea">
    			<pre id='js4'>
//<span class="showClew"> 设置静态数据源</span>
var datas = [];
for(var i = 1;i <= 100;i++)
{	
	datas.push({id: i, name:'NO - ' + i});
}
		
var gridOption4 = {
	height:220,
	
	//<span class="showClew"> 设置igrid进行延迟加载，即滚动加载</span>
	lazyLoad: true,
	
	// <span class="showClew"> 设置igrid的数据仓库</span>
	storageOp:{
		//<span class="showClew"> 设置igrid缓存数据</span>
		cacheData: true,
		
		//<span class="showClew"> 设置缓存key值</span>
		cacheKey: ["id"]
	},
	columns: [
		{columnType:"select", multi: false},
		{width: '100px', field: 'id', header: 'id'},
		{width: '100px', field: 'name', header: 'name'}
	]
};
    	
$("#igridDemo4").igrid(gridOption4, datas);
    			</pre>
    		</div>
    		<div class="try">
				<a  onclick="Ccay.example.openTry('#scrollLoadDemo',$('#js4').html(), $('#html4').html())">亲自试一试</a>
			</div>
		</div>
		
		<h4 id="hd2"><span onclick="Ccay.Common.toggle(this,'#demo2')" style="cursor:pointer;">实例2：IGrid动态数据滚动加载</span></h4>
		<div id="demo2" style="display: none;">
			<span class="showClew">备注：IGrid动态数据滚动加载Demo根据移动竖向滚动条进行简单的数据加载、展示、排序、改变列宽</span><br /><br />
			<form id="scrollLoadForm" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<!--条件输入区域-->
					<li class="ccay-form-row">
					  <samp class="i18n" i18nKey="name"></samp>
					  <span class='ccay-form-input'>
					    <input type="text" name="name" />
					  </span>
					</li>
				</ul>
			</div>
			<!--查询操作区域-->
			<div class="ccay-operate">
				<span id="btnScrollSearch" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
			</form>
			<div class="ccay-grid-toolbar">
				<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent1').manager().getSelectedRecords());" value='get selected records' type='button' />	
				<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent1').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
				<input id="btnScrollDel" value='delete' type='button' />
				<input id="btnScrollUndoDel" value='undo delete' type=button />
				<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent1').manager().getDeletedRecords());" value='get deleted records' type='button' />
				<input id="btnScrollAdd" value='insert' type='button' />
				<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent1').manager().getInsertedRecords());" value='get inserted records' type='button' />
				<input id="btnScrollSave" value='save' type='button' />
			</div>
			<div id="iStudent1"></div>
			<h3>html Code</h3>
		 	<span></span>
		 	<div class="codeArea">
				<pre id='html1'>
&lt;form id="searchForm" class="init ccay-form">
	&lt;!--条件输入区域-->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo1').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo1').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input id="btnDel" value='delete' type='button' />
	&lt;input id="btnUndoDel" value='undo delete' type=button />
	&lt;input onclick="operateTest($('#igridDemo1').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo1').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo1">&lt;/div>
				</pre>
		 	</div>
		 	<h3>js Code</h3>
	    	<span></span>
	    	<div class="codeArea">
    			<pre id='js1'>
//<span class="showClew"> 设置点击事件</span>	
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};

var gridOption1 = {
	height: 300,
	editMode: true,
	
	//<span class="showClew"> 设置igrid进行延迟加载，即滚动加载</span>
	lazyLoad: true,
	
	// <span class="showClew"> 设置igrid的数据仓库</span>
	storageOp:{
		//<span class="showClew"> 设置igrid缓存数据</span>
		cacheData: true,
		
		//<span class="showClew"> 设置缓存key值</span>
		cacheKey: ["id"]
	},
	columns: [
		{columnType: "select", multi: true},
		{field: 'id', width: 100, header: 'id', editable: false},
		{field: 'name', width:100, header: "name", rule: {required: true}},
		{field: 'description', width:200, header: "description"}
	],
	//<span class="showClew"> 设置igrid的ajax请求参数，<span>url地址必须传入3个参数</span></span>
    ajax: {
    	url: 'services/ccay/demo/grid/list/ranged/${start}/${end}/${orderBy}/${total}'
    },
    operation: {
    	search: {
    		btn: '#btnSearch',
			panel: '#searchForm'
    	},
    	del: {
    		btn: '#btnDel',
    		undoBtn: '#btnUndoDel'
    	},
    	insert: {
    		btn: '#btnAdd',
    		copy: true,
    		clear: ['id']
    	},
    	save: {
    		btn: '#btnSave',
    		ajax: {
    			url: "services/ccay/demo/grid/batch"
    		}
    	}
    }
};

$("#igridDemo1").igrid(gridOption1);
    			</pre>
    		</div>
	    	<div class="try">
				<a  onclick="Ccay.example.openTry('#scrollLoadDemo',$('#js1').html(), $('#html1').html())">亲自试一试</a>
			</div>
		</div>
	</div>
	
	<div title='行合并滚动加载' tabid='tab3'>
		<span class="showClew">备注：IGrid行合并滚动加载Demo进行名称相同的一些行的合并显示，并根据移动竖向滚动条进行简单的数据加载</span><br /><br />
		<form id="rowUniteForm" class="init ccay-form">
		<div class="ccay-form-body">
			<ul>
				<!--条件输入区域-->
				<li class="ccay-form-row">
				  <samp class="i18n" i18nKey="name"></samp>
				  <span class='ccay-form-input'>
				    <input type="text" name="name" />
				  </span>
				</li>
			</ul>
		</div>
		<!--查询操作区域-->
		<div class="ccay-operate">
			<span id="btnUniteSearch" class="ccay-button default" >
				<a class="ccay-icon search"></a>
				<label class="i18n" i18nKey="ccay.common.button.search"></label>
			</span>
			<span class="init button ccay-button reset" >
				<a class="ccay-icon reset"></a>
				<label class="i18n" i18nKey="ccay.common.button.reset"></label>
			</span>
		</div>
		</form>
		<div class="ccay-grid-toolbar">
			<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent2').manager().getSelectedRecords());" value='get selected records' type='button' />	
			<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent2').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
			<input id="btnUniteDel" value='delete' type='button' />
			<input id="btnUniteUndoDel" value='undo delete' type=button />
			<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent2').manager().getDeletedRecords());" value='get deleted records' type='button' />
			<input id="btnUniteAdd" value='insert' type='button' />
			<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent2').manager().getInsertedRecords());" value='get inserted records' type='button' />
			<input id="btnUniteSave" value='save' type='button' />
		</div>
		<div id="iStudent2"></div>
		<h3>html Code</h3>
	 	<span></span>
	 	<div class="codeArea">
		<pre id='html2'>
&lt;form id="searchForm" class="init ccay-form">
	&lt;!--条件输入区域-->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo2').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo2').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input id="btnDel" value='delete' type='button' />
	&lt;input id="btnUndoDel" value='undo delete' type=button />
	&lt;input onclick="operateTest($('#igridDemo2').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo2').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo2">&lt;/div>
		</pre>
	 	</div>
	 	<h3>js Code</h3>
    	<span></span>
    	<div class="codeArea">
    		<pre id='js2'>
//<span class="showClew"> 设置点击事件</span>	
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};

var gridOption2 = {
	height: 300,
	editMode: true,
	
	//<span class="showClew"> 设置igrid进行延迟加载，即滚动加载</span>
	lazyLoad: true,
	
	// <span class="showClew"> 设置igrid的数据仓库</span>
	storageOp:{
		//<span class="showClew"> 设置igrid缓存数据</span>
		cacheData: true,
		
		//<span class="showClew"> 设置缓存key值</span>
		cacheKey: ["id"]
	},
	
	//<span class="showClew"> rowRender: "rowSpan"设置数据列表显示为行合并类型</span>
	rowRender: "rowSpan",
	columns: [
		{columnType: "select", multi: true},
		{field: 'name', width:100, header: "name", rowSpan: true, rule: {required: true}},
		{field: 'description', width:200, header: "description"},
		{field: 'id', width: 100, header: 'id', editable: false}
	],
    ajax: {
    	url: 'services/ccay/demo/grid/list/ranged/${start}/${end}/${orderBy}/${total}'
    },
    operation: {
    	search: {
    		btn: '#btnSearch',
			panel: '#searchForm'
    	},
    	del: {
    		btn: '#btnDel',
    		undoBtn: '#btnUndoDel'
    	},
    	insert: {
    		btn: '#btnAdd',
    		copy: true,
    		clear: ['id']
    	},
    	save: {
    		btn: '#btnSave',
    		ajax: {
    			url: "services/ccay/demo/grid/batch"
    		}
    	}
    }
};

$("#igridDemo2").igrid(gridOption2);
    		</pre>
    	</div>
    	<div class="try">
			<a  onclick="Ccay.example.openTry('#scrollLoadDemo',$('#js2').html(), $('#html2').html())">亲自试一试</a>
		</div>
	</div>
	
	<div title='行分组滚动加载' tabid='tab4'>
	 	<span class="showClew">备注：IGrid行合并滚动加载Demo进行名称相同的一些行的分组显示，并根据移动竖向滚动条进行简单的数据加载</span><br /><br />
	 	<form id="rowGroupForm" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<!--条件输入区域-->
					<li class="ccay-form-row">
					  <samp class="i18n" i18nKey="name"></samp>
					  <span class='ccay-form-input'>
					    <input type="text" name="name" />
					  </span>
					</li>
				</ul>
			</div>
			<!--查询操作区域-->
			<div class="ccay-operate">
				<span id="btnGroupSearch" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>
		<div class="ccay-grid-toolbar">
			<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent3').manager().getSelectedRecords());" value='get selected records' type='button' />	
			<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent3').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
			<input id="btnGroupDel" value='delete' type='button' />
			<input id="btnGroupUndoDel" value='undo delete' type=button />
			<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent3').manager().getDeletedRecords());" value='get deleted records' type='button' />
			<input id="btnGroupAdd" value='insert' type='button' />
			<input onclick="Ccay.example.ui.igird.scrollLoadFunction.operateTest($('#iStudent3').manager().getInsertedRecords());" value='get inserted records' type='button' />
			<input id="btnGroupSave" value='save' type='button' />
		</div>
	 	<div id="iStudent3"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html3'>
&lt;form id="searchForm" class="init ccay-form">
	&lt;!--条件输入区域-->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo3').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo3').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input id="btnDel" value='delete' type='button' />
	&lt;input id="btnUndoDel" value='undo delete' type=button />
	&lt;input onclick="operateTest($('#igridDemo3').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo3').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo3">&lt;/div>
			</pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js3'>
//<span class="showClew"> 设置点击事件</span>	
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};

var gridOption3 = {
	height: 300,
	editMode: true,
	
	//<span class="showClew"> 设置igrid进行延迟加载，即滚动加载</span>
	lazyLoad: true,
	
	// <span class="showClew"> 设置igrid的数据仓库</span>
	storageOp:{
		//<span class="showClew"> 设置igrid缓存数据</span>
		cacheData: true,
		
		//<span class="showClew"> 设置缓存key值</span>
		cacheKey: ["id"]
	},
	
	//<span class="showClew"> rowRender: "group"设置数据列表显示为行合并类型</span>
	rowRender: "group",
	columns: [
		{columnType: "select", multi: true},
		{field: 'name', width:100, header: "name", group: true, rule: {required: true}},
		{field: 'description', width:200, header: "description"},
		{field: 'id', width: 100, header: 'id', editable: false}
	],
	ajax: {
		url: 'services/ccay/demo/grid/list/ranged/${start}/${end}/${orderBy}/${total}'
	},
	operation: {
	   	search: {
	   		btn: '#btnSearch',
			panel: '#searchForm'
	   	},
	   	del: {
	   		btn: '#btnDel',
	   		undoBtn: '#btnUndoDel'
	   	},
	   	insert: {
	   		btn: '#btnAdd',
	   		copy: true,
	   		clear: ['id']
	   	},
	   	save: {
	   		btn: '#btnSave',
	   		ajax: {
	   			url: "services/ccay/demo/grid/batch"
	   		}
	   	}
	}
};

$S("#igridDemo3").igrid(gridOption3);
      		</pre>
      	</div>
      	<div class="try">
			<a  onclick="Ccay.example.openTry('#scrollLoadDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
		</div>
	 </div>
	 
	 <!-- Try区 -->
	 <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 
	 <!-- FAQ区 -->
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
	 
</div>